<template>
  <el-row/>
  <el-row/>
  <el-row/>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="4">
      账号: {{ test_account }}
    </el-col>
  </el-row>
  <el-row>
      <el-col :span="10"/>
      <el-col :span="4">
        邮箱: {{ test_email }}
      </el-col>
      <el-col :span="2">
        <el-button disabled>修改邮箱</el-button>
      </el-col>
  </el-row>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="4">
      <el-button disabled>修改密码</el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="2">
      <el-text>设置每日新学词数</el-text>
    </el-col>
    <el-select
      v-model="newWordNumber"
      placeholder="选择数量"
      size="large"
      style="width: 240px"
    >
      <el-option label="30" value="30"></el-option>
      <el-option label="60" value="60"></el-option>
      <el-option label="90" value="90"></el-option>
    </el-select>
  </el-row>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="2">
      <el-text>设置每日复习词数</el-text>
    </el-col>
    <el-col :span="2">
      <el-select
        v-model="recallWordNumber"
        placeholder="选择数量"
        size="large"
        style="width: 240px"
      >
        <el-option label="30" value="30"></el-option>
        <el-option label="60" value="60"></el-option>
        <el-option label="90" value="90"></el-option>
      </el-select>
    </el-col>

  </el-row>
  <el-row>
    <el-col :span="12"/>
    <el-col :span="2">
      <el-button @click="userSetNewAndRecall">确认设置</el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12"/>
    <el-col :span="2">
      <el-text v-model="responseValue"></el-text>
    </el-col>
  </el-row>
  <el-row/>
  <el-row/>
  <el-row/>
  <el-row>
    <el-col :span="20"/>
    <el-col :span="2">
      <el-button @click="RedirectToMainPage">返回主页面</el-button>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import type { UserConfigChangeRecallNumber } from './AccountPageInterface';
import api from '@/utils/axiosUtil';

const router = useRouter();

function RedirectToMainPage(){
  router.push('main');
}

async function userSetNewAndRecall(){
  const applicationDictRequest:UserConfigChangeRecallNumber = {
    userId: test_user_id.value,
    newWordNumber: newWordNumber.value,
    recallWordNumber: recallWordNumber.value
  }
  try {
    const response = await api.post<Map<string,string>>('/set-recall-number', applicationDictRequest);
    for(const key in response.data) {
        responseValue.value = "key:"+key+"value:"+response.data.get(key);
    }
  } catch (error) {
    console.error('登录失败:', error);
    throw error;
  }
}

const newWordNumber = ref(30);
const recallWordNumber = ref(30);
const responseValue = ref('');




const test_user_id = ref('1');
const test_account = ref('abandon');
const test_email = ref('abandon@abandon.abandon');
const test_newWordNumber = ref(10);
const test_recallWordNumber = ref(10);

</script>

<style scoped>
.el-row {
  margin-bottom: 10px;
  min-height: 20px;
  align-items: center;
}
.el-col {
  margin: 2px;
}
</style>
